<template>
	<view>
		<view class="header">
			<text @click="back" class="iconfont icon-xiangzuojiantou">处方单信息</text>
		</view>
		<view class="content">
			<view class="cFirst" @click="tiaozhuan">
				<view>
					<view>用药人</view>
					<view>{{xuanranData.yyr_name}}</view>
					<view>{{xuanranData.yyr_sex}} {{xuanranData.yyr_age}}岁  {{xuanranData.yyr_tel}}</view>
				</view>
				<text class="iconfont icon-youjiantou"></text>
			</view>
			<view class="cSecond">
				<form @submit="formSubmit" @reset="formReset">
					<view class="uni-form-item uni-column">
						<view class="title title1">已确诊疾病 <text>可多选*</text></view>
						<checkbox-group name="jibing">
							<label>
								<checkbox value="原发性高血压" /><text :class="checkedarr[0]==true?'textActive':''" @click="changeChecked(0)">原发性高血压</text>
							</label>
							<label>
								<checkbox value="高血压" /><text :class="checkedarr[1]==true?'textActive':''" @click="changeChecked(1)">高血压</text>
							</label>
							<label>
								<checkbox value="心绞痛" /><text :class="checkedarr[2]==true?'textActive':''" @click="changeChecked(2)">心绞痛</text>
							</label>
						</checkbox-group>
					</view>
					<view class="uni-form-item uni-column">
						<view class="title">是否使用过该药品:*</view>
						<radio-group name="isUse">
							<label>
								<radio value="1" :checked="xuanranData.cf_isUsedyaopin==1?'true':''"/><text>是</text>
							</label>
							<label>
								<radio value="0" :checked="xuanranData.cf_isUsedyaopin==0?'true':''"/><text>否</text>
							</label>
						</radio-group>
					</view>
					<view class="uni-form-item uni-column">
						<view class="title">有无不良反应:*</view>
						<radio-group name="fanying">
							<label>
								<radio value="1" :checked="xuanranData.cf_isBuliangfanying==1?'true':''"/><text>是</text>
							</label>
							<label>
								<radio value="0" :checked="xuanranData.cf_isBuliangfanying==0?'true':''"/><text>否</text>
							</label>
						</radio-group>
					</view>
					<view class="uni-btn-v">
						<button class="footerBtn" type="warn" form-type="submit">提交</button>
					</view>
				</form>
			</view>
			<view class="cThird">
				<view>补充病例信息</view>
				<view>
					<text>线下就诊的历史处方、病例或报告单</text>
					<view class="chooseimg">
						<image v-for="(item,index) in imageArr" :src="IP+item" :key="index" mode="widthFix"></image>
						<image @click="uploadImg" src="../../static/上传图片.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 站位空白 -->
		<view class="kongbai"></view>
		<!-- <view class="footer">
			<button type="warn" @click="tijiao">提交</button>
		</view> -->
	</view>
</template>

<script>
	import {reactive,toRefs,onMounted,computed} from 'vue';
	import {useStore} from 'vuex'
	import http from '../../utils/http.js';
	export default {
		setup(){
			const {state,commit,dispatch,getters} = useStore();
			let data=reactive({
				IP:computed(()=>state.IP),
				// 存放即将存入数据库的地址,图片渲染数组
				imageArr:[],
				// 渲染页面的数据
				xuanranData:computed(()=>state.shopcart.chufangArr),
				// {
				// 	cf_id: 1,
				// 	cf_imgsrc: "/uploads/yaopinliebiao/moren1.jpg",
				// 	cf_isBuliangfanying: 0,
				// 	cf_isUsedyaopin: 1,
				// 	cf_isshiyong: 0,
				// 	cf_yiquerenjibing: "高血压",
				// 	cf_yonyaorenId: 1,
				// 	y_bingshi: "发烧",
				// 	y_birthtime: "1999-10-20",
				// 	y_chufang: "xxxxxxxxx",
				// 	y_id: 1,
				// 	y_imgsrc: null,
				// 	y_name: "小一",
				// 	y_sex: "男",
				// 	y_shenfenzheng: "110110110",
				// 	y_tel: "1232131",
				// 	y_zhuangtai: 1,
				// 	y_zhucetime: "2020-02-07 21：00：00",
				// 	yyr_age: "42",
				// 	yyr_bingshi: "有过敏病史",
				// 	yyr_birth: "1979-10",
				// 	yyr_guanxi: "本人",
				// 	yyr_id: 1,
				// 	yyr_isUsed: 1,
				// 	yyr_name: "李四",
				// 	yyr_sex: "男",
				// 	yyr_shengfenzheng: "123456781353456789",
				// 	yyr_tel: "13485556877",
				// 	yyr_yonghuId: 1
				// },
				checkedarr:[false,false,false],
				back(){
					console.log('返回')
					uni.redirectTo({
						url: '/pages/querendingdan/querendingdan'
					});
				},
				tiaozhuan(){
					console.log('跳转')
					uni.navigateTo({
						url: '/pages/yongyaorenguanli/yongyaorenguanli'
					});
				},
				// 多选按钮样式改变
				changeChecked(e){
					data.checkedarr[e]=!data.checkedarr[e]
				},
				// 提交
				formSubmit: function(e) {
					console.log(e.detail.value)
					let img=data.imageArr.join(',')
					// console.log(img)
					let jibing=e.detail.value.jibing.join(',')
					console.log(jibing,img)
					if(img!=''&&e.detail.value.jibing.length){
						http({
							url:'/editchufangxinxi',
							method:'post',
							data:{
								id:data.xuanranData.cf_id,
								cf_isUsedyaopin:e.detail.value.isUse,
								cf_isBuliangfanying:e.detail.value.fanying,
								cf_imgsrc:img,
								cf_yiquerenjibing:jibing
							}
						}).then((res)=>{
							// console.log(res)
							if(res.data.code==200){
								uni.showToast({
									title: '编辑成功',
									duration: 1000
								});
								setTimeout(()=>{
									uni.redirectTo({
										url:'/pages/querendingdan/querendingdan'
									})
								},1500)
							}
						})
					}else{
						uni.showToast({
							title: '请完善信息',
							icon:'error',
							duration: 1000
						});
					}
					// console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
					// var formdata = e.detail.value
					// uni.showModal({
					// 	content: '表单数据内容：' + JSON.stringify(formdata),
					// 	showCancel: false
					// });
				},
				// 图片上传
				uploadImg(){
					const token = uni.getStorageSync('token')
					uni.chooseImage({
						count:1,
						sourceType: ['album'], //从相册选择
						success:(res)=> {
							const tempFilePaths = res.tempFilePaths;
							uni.uploadFile({
								url: data.IP+'/getChufangtupian',
								filePath: tempFilePaths[0],
								name: 'file',
								header: {
									'token': token
								},
								// formData: {
								// 	'user': 'test'
								// },
								success: (resl) => {
									// console.log(resl.data);
									data.imageArr.push('/uploads/chufang/'+resl.data)
									// 只允许传2张图
									if(data.imageArr.length>2){
										data.imageArr.splice(0,1)
									}
								}
							});
							// console.log(res)
							// console.log(res.tempFilePaths)
							// 一张图片上传显示
							// data.imgArr=res.tempFilePaths
							// 多图片上传显示
							// data.imgArr.push(res.tempFilePaths);
							// // 只允许传2张图
							// if(data.imgArr.length>2){
							// 	data.imgArr.splice(0,1)
							// }
							// console.log(data.imgArr)
						}
					})
				}
			})
			onMounted(()=>{
				let id=state.userID
				// 查询该用户的处方以及用药人信息
				http({
					url:'/getchufangxinxi',
					method:'post',
					data:{
						id:id
					}
				}).then((res)=>{
					let flag=1
					if(res.data.code==200){
						commit('shopcart/getallchufangandyyrData',res.data.data)
						// console.log(state.shopcart.allchufangandyyrArr)
						for (let i = 0; i < state.shopcart.allchufangandyyrArr.length; i++) {
							if(state.shopcart.allchufangandyyrArr[i].cf_yonyaorenId==state.shopcart.yongyaoren.yyr_id &&state.shopcart.allchufangandyyrArr[i].cf_isshiyong==1){
								commit('shopcart/getchufangData',state.shopcart.allchufangandyyrArr[i])
							}
						}
						// 如果该用户没有处方信息，跳转到添加处方信息处
						// console.log(state.shopcart.chufangArr)
						if(state.shopcart.chufangArr.length==0){
							uni.showToast({
								title: '暂无处方请添加',
								icon:'loading',
								duration: 1000
							});
							setTimeout(()=>{
								uni.redirectTo({
									url:'/pages/addchufang/addchufang'
								})
							},1500)
						}else{
							// data.xuanranData=state.shopcart.chufangArr
							// console.log(data.xuanranData.cf_imgsrc.split(','))
							if(data.xuanranData.cf_imgsrc){
								let arr=data.xuanranData.cf_imgsrc.split(',')
								for (let i = 0; i < arr.length; i++) {
									data.imageArr.push(arr[i])
								}
							}
							// data.changeChecked(1)
						}
					}
				})
				
			})
			return {...toRefs(data)}
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	@import url("~@/static/fonts/iconfont.css");
	.header{
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #efefef;
		display: flex;
		justify-content: space-between;
		>text:nth-child(2){
			color: red;
		}
	}
	.content{
		padding: 20rpx 10rpx;
		box-sizing: border-box;
		background-color: #efefef;
	}
	.cFirst{
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: white;
		view:nth-child(1){
			flex: 1;
			view:not(:first-child){
				margin-top: 20rpx;
			}
		}
	}
	.cSecond{
		margin: 20rpx 0;
		padding: 0rpx 30rpx;
		padding-bottom: 30rpx;
		box-sizing: border-box;
		background-color: white;
		.uni-form-item .title {
			padding: 20rpx 0;
			margin-bottom: 20rpx;
			margin-top: 20rpx;
		}
		checkbox-group{
			display: flex;
			justify-content: space-around;
			align-items: center;
			checkbox{
				display: none;
			}
			text{
				padding: 6rpx 16rpx;
				border: 1px solid #efefef;
				border-radius: 10px;
			}
			.textActive{
				background-color: #DA2222;
				color: white;
				border: 1px solid #DA2222;
			}
		}
		.uni-form-item{
			radio{
				transform: scale(0.7);
			}
		}
	}
	.footerBtn{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		border: 1px solid red;
		border-radius: 0;
	}
	.cThird{
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		background-color: white;
		view{
			margin: 20rpx 0;
		}
	}
	.chooseimg{
		image{
			width: 200rpx;
		}
	}
	// .footer{
	// 	position: fixed;
	// 	bottom: 0;
	// 	width: 100%;
	// 	button{
	// 		border: 1px solid red;
	// 		border-radius: 0;
	// 	}
	// }
	.kongbai {
		height: 102rpx;
		// background-color: red;
	}
</style>
